<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>使用 Vue Cli 3 打包组件并发布至npm | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="1.使用 Vue Cli 3 创建项目vue create vue-test  2.修改目录并配置webpack修改后的目录  src -&amp;gt; examples  用于放置示例文件 增加 packages 文件夹 用于打包 增加 lib 文件夹 用户放置打包后的文件 增加 vue.config.js 文件 用于配置webpack  vue.config.js 配置 1234567891011">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="使用 Vue Cli 3 打包组件并发布至npm">
<meta property="og:url" content="https://storm4542.github.io/archives/8ea8a281.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="1.使用 Vue Cli 3 创建项目vue create vue-test  2.修改目录并配置webpack修改后的目录  src -&amp;gt; examples  用于放置示例文件 增加 packages 文件夹 用于打包 增加 lib 文件夹 用户放置打包后的文件 增加 vue.config.js 文件 用于配置webpack  vue.config.js 配置 1234567891011">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923194873-d02299bf-4410-4267-926c-2bcec79d11a6.png#align=left&display=inline&height=399&name=image.png&originHeight=798&originWidth=556&size=87992&status=done&width=278">
<meta property="og:image" content="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923611695-fbdca6d1-4f50-4976-b223-37f659f9bacb.png#align=left&display=inline&height=296&name=image.png&originHeight=784&originWidth=946&size=87746&status=done&width=357">
<meta property="og:image" content="https://cdn.nlark.com/yuque/0/2019/png/148286/1558924162109-795823a3-06d9-4f9e-a02a-5516b11775d3.png#align=left&display=inline&height=116&name=image.png&originHeight=232&originWidth=670&size=30083&status=done&width=335">
<meta property="og:updated_time" content="2019-05-27T02:57:19.983Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="使用 Vue Cli 3 打包组件并发布至npm">
<meta name="twitter:description" content="1.使用 Vue Cli 3 创建项目vue create vue-test  2.修改目录并配置webpack修改后的目录  src -&amp;gt; examples  用于放置示例文件 增加 packages 文件夹 用于打包 增加 lib 文件夹 用户放置打包后的文件 增加 vue.config.js 文件 用于配置webpack  vue.config.js 配置 1234567891011">
<meta name="twitter:image" content="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923194873-d02299bf-4410-4267-926c-2bcec79d11a6.png#align=left&display=inline&height=399&name=image.png&originHeight=798&originWidth=556&size=87992&status=done&width=278">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-使用Vue Cli3打包组件并发布至npm" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      使用 Vue Cli 3 打包组件并发布至npm
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2019-05-27T02:54:14.000Z" itemprop="datePublished">2019-05-27</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p><a name="XTDAo"></a></p>
<h2 id="1-使用-Vue-Cli-3-创建项目"><a href="#1-使用-Vue-Cli-3-创建项目" class="headerlink" title="1.使用 Vue Cli 3 创建项目"></a>1.使用 Vue Cli 3 创建项目</h2><p><code>vue create vue-test</code></p>
<p><a name="RfzFH"></a></p>
<h2 id="2-修改目录并配置webpack"><a href="#2-修改目录并配置webpack" class="headerlink" title="2.修改目录并配置webpack"></a>2.修改目录并配置webpack</h2><p>修改后的目录<br><strong><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923194873-d02299bf-4410-4267-926c-2bcec79d11a6.png" alt="image.png"></strong></p>
<ul>
<li>src -&gt; examples  用于放置示例文件</li>
<li>增加 packages 文件夹 用于打包</li>
<li>增加 lib 文件夹 用户放置打包后的文件</li>
<li>增加 vue.config.js 文件 用于配置webpack</li>
</ul>
<p><strong>vue.config.js 配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">    pages: &#123;</span><br><span class="line">        index: &#123;</span><br><span class="line">            entry: <span class="string">'examples/main.js'</span>,</span><br><span class="line">            template: <span class="string">'public/index.html'</span>,</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    css: &#123;</span><br><span class="line">        extract: <span class="literal">false</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 扩展 webpack 配置，使 packages 加入编译</span></span><br><span class="line">    chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">        config.module</span><br><span class="line">            .rule(<span class="string">'js'</span>)</span><br><span class="line">            .include</span><br><span class="line">            .add(<span class="string">'/packages'</span>)</span><br><span class="line">            .end()</span><br><span class="line">            .use(<span class="string">'babel'</span>)</span><br><span class="line">            .loader(<span class="string">'babel-loader'</span>)</span><br><span class="line">            .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="comment">// 修改它的选项...</span></span><br><span class="line">                <span class="keyword">return</span> options;</span><br><span class="line">            &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><a name="TP1jO"></a></p>
<h2 id="3-packages-配置"><a href="#3-packages-配置" class="headerlink" title="3.packages 配置"></a>3.packages 配置</h2><p><strong>packages/index.js</strong><br>用于导出组件，<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入组件</span></span><br><span class="line"><span class="keyword">import</span> datePicker <span class="keyword">from</span> <span class="string">'./datepicker'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 存储组件列表</span></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line">    datePicker</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册</span></span><br><span class="line"><span class="keyword">const</span> install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 判断是否安装</span></span><br><span class="line">    <span class="keyword">if</span> (install.installed) <span class="keyword">return</span>;</span><br><span class="line">    <span class="comment">// 遍历注册全局组件</span></span><br><span class="line">    components.map(<span class="function"><span class="params">component</span> =&gt;</span> Vue.component(component.name, component));</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否是直接引入文件</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">'undefined'</span> &amp;&amp; <span class="built_in">window</span>.Vue) &#123;</span><br><span class="line">    install(<span class="built_in">window</span>.Vue);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="comment">// 导出的对象必须具有 install，才能被 Vue.use() 方法安装</span></span><br><span class="line">    install,</span><br><span class="line">    <span class="comment">// 以下是具体的组件列表</span></span><br><span class="line">    datePicker</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p><strong>packages/datepicker/index.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> datepicker <span class="keyword">from</span> <span class="string">'./src/date-picker'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 为组件提供 install 安装方法，供按需引入</span></span><br><span class="line">datepicker.install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">    Vue.component(datepicker.name, datepicker); <span class="comment">//datepiacker.name 下面解释</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> datepicker;</span><br></pre></td></tr></table></figure>
<ul>
<li>datepicker.name  为组件内的 name , 未来使用时，需要使用该 name 作为标签，因此不能随意写。</li>
</ul>
<p><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1558923611695-fbdca6d1-4f50-4976-b223-37f659f9bacb.png" alt="image.png"></p>
<p><strong>packages/src</strong></p>
<p>里面包含组件的所有文件</p>
<p><a name="B713v"></a></p>
<h2 id="4-package-json"><a href="#4-package-json" class="headerlink" title="4. package.json"></a>4. package.json</h2><p>在 scripts 中增加一行命令</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"lib"</span>: <span class="string">"vue-cli-service build --target lib --name vue-simple-datepicker --dest lib packages/index.js"</span>,</span><br></pre></td></tr></table></figure>
<ul>
<li>–target lib  表明打包至 lib 文件夹</li>
<li>–name vue-simple-d aepicker 表明打包后的文件名</li>
<li>–dest lib  指定输出的目标文件</li>
</ul>
<p>然后我们执行 yarn build<br>可以看到 lib 文件夹下出现了三个文件</p>
<p><img src="https://cdn.nlark.com/yuque/0/2019/png/148286/1558924162109-795823a3-06d9-4f9e-a02a-5516b11775d3.png" alt="image.png"></p>
<p>demo.html 不用管，下面的两个文件才是我们想要的。<br>一个是 umd 的，一个是 common 的。<br>在前端内我们一般都用 umd 的，因此可以在 package.json 加上这么一条 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"main"</span>: <span class="string">"lib/vue-simple-datepicker.umd.min.js"</span>,</span><br></pre></td></tr></table></figure>
<p>表明入口文件是 <strong>lib/vue-simple-datepicker.umd.min.js</strong><br>**<br><a name="c2zJZ"></a></p>
<h2 id="5-发布至-npm"><a href="#5-发布至-npm" class="headerlink" title="5. 发布至 npm"></a>5. 发布至 npm</h2><p>首先你要完善你的 package.json </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"vue-simple-datepicker-ln"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.1"</span>,</span><br><span class="line">  "private": false,    //一定要是 false</span><br><span class="line">  "main": "lib/vue-simple-datepicker.umd.min.js",</span><br><span class="line">  "repository": &#123;</span><br><span class="line">    "type": "git",</span><br><span class="line">    "url": "git@github.com:Storm4542/vue-simple-datepicker.git"</span><br><span class="line">  &#125;,</span><br><span class="line">  "bugs": &#123;</span><br><span class="line">    "url": "https://github.com/Storm4542/vue-simple-datepicker/issues"</span><br><span class="line">  &#125;,</span><br><span class="line">  "homepage": " https://storm4542.github.io/vue-simple-datepicker/",</span><br><span class="line">  "keywords": [</span><br><span class="line">    "datepicker",</span><br><span class="line">    <span class="string">"vue-datepicker"</span></span><br><span class="line">  ],</span><br><span class="line">  "license": "MIT",</span><br><span class="line">  "scripts": &#123;</span><br><span class="line">    "lib": "vue-cli-service build --target lib --name vue-simple-datepicker --dest lib packages/index.js",</span><br><span class="line">    "serve": "vue-cli-service serve",</span><br><span class="line">    "build": "vue-cli-service build"</span><br><span class="line">  &#125;,</span><br><span class="line">  "dependencies": &#123;</span><br><span class="line">    "@vue/babel-preset-app": "^3.0.0",</span><br><span class="line">    "vue": "^2.6.6"</span><br><span class="line">  &#125;,</span><br><span class="line">  "devDependencies": &#123;</span><br><span class="line">    "@vue/cli-plugin-babel": "^3.5.3",</span><br><span class="line">    "@vue/cli-service": "^3.5.3",</span><br><span class="line">    "less": "^3.0.4",</span><br><span class="line">    "less-loader": "^4.1.0",</span><br><span class="line">    "vue-template-compiler": "^2.5.21"</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>登录 npm 。<br>yarn lib 后  npm publish 即可。</p>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="b422724c.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          JS的运行机制
        
      </div>
    </a>
  
  
    <a href="81b0b94a.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Cordova+Vue实现点击两次返回退出应用</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/8ea8a281.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
